<template>
  <div class="box">
    <header>
      <van-nav-bar title="设置">
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.back()"
          />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </header>
    <div class="main">
      <div class="top10">
        <van-cell title="修改个人信息" icon="user-o" is-link />
        <van-cell title="修改密码" icon="edit" is-link />
        <van-cell title="管理收货地址" icon="guide-o" is-link />
        <van-cell class="top10" title="隐私设置" icon="service-o" is-link />
        <van-cell title="会员专享" icon="vip-card-o" is-link />
        <van-cell title="账户安全" icon="shield-o" is-link />

        <van-cell title="退出登录" icon="revoke" is-link @click="remove" />
        <van-cell
          class="top10"
          title="致电我们"
          icon="phone-circle-o"
          is-link
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup,Dialog  } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Dialog);
export default {
  name: "My",
  data() {
    return {
      showPopover: false,
      actions: [
        { text: "返回首页", icon: "wap-home-o" },
        { text: "分类搜索", icon: "apps-o" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "我的京东", icon: "contact" },
        { text: "浏览记录", icon: "eye-o" },
      ],
      show: false,
    };
  },
  methods: {
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/kind");
          break;
        case 2:
          this.$router.go(0);
          break;
        case 3:
          this.$router.push("/my");
          break;
        case 4:
          this.$router.push("/kind");
          break;
        default:
          break;
      }
    },
    remove() {
      Dialog.confirm({
        message: "确定退出登陆吗？",
      })
        .then(() => {
          localStorage.clear()
          this.$router.push("/home")
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.mymsg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.2rem;
  background: #fff;
}
.mymsg img {
  width: 0.8rem;
  margin: 0 0.2rem;
}
.mymsg div {
  display: flex;
  align-items: flex-start;
  align-items: center;
}
.userchange {
  color: #ccc;
  font-size: 0.3rem;
  margin: 0.2rem;
}
.top10 {
  margin-top: 0.1rem;
}
</style>